<template>
	<div>
		<div class="demo-upload-list" v-for="item in imageList" v-if="demoshow">
			<template v-if="!uploadImg.visible">
				<img :src="item.imageUrl">
				<div class="demo-upload-list-cover">
					<Icon type="ios-eye-outline" @click.native="handleView(item.imageUrl)"></Icon>
					<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
				</div>
			</template>
			<template v-else>
				<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
			</template>
		</div>

		<Upload :show-upload-list="showUpload" class="videoUpload" v-if="btn.visible" :default-file-list="defaultList" :on-success="handleSuccess" :accept="accept" :max-size="maxSize" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" :before-upload="handleBeforeUpload" :multiple="multiple" :data="data" :action="action">
			<Button type="ghost" icon="ios-cloud-upload-outline">视频上传</Button>
			<span>（请选择mp4格式的视频！）</span>
		</Upload>
		<Button type="info" icon="ios-barcode-outline" class="videolink" @click="clickLink" v-show="linksbtn">视频链接</Button>
		<Modal title="查看视频预览图" v-model="visible" class="check_pig">
			<img :src="imgName " v-if="visible" style="width: 100%;">
		</Modal>

		<Modal v-model="modalunbind" title="添加视频链接" @on-ok="unbindOk" :transfer="false" width='800'>
			<Form ref="linkform" :model="links.form" :label-width="100" label-position="right" :rules="links.rules">
				<FormItem label="链接地址" prop="lineName">
					<Input v-model="links.form.lineName" style="width:75%"></Input>
				</FormItem>
			</Form>
			<div slot="footer">
				<Button type="warning" @click="Submission">立即提交</Button>
				<Button type="primary" @click="Reset">重置</Button>
			</div>
		</Modal>
	</div>
</template>
<script>
  import API from "@/api/api";
  import Cookies from 'js-cookie';

  export default {
		props: {
			accept: {
				type: String,
				default: '.mp4'
			},
			maxSize: {
				type: Number,
				default: 20480
			},
			multiple: {
				type: Boolean,
				default: true,
			},
			linksbtn: {
				type: Boolean,
				default: false,
			},
			linksData: Array,
			delUrl: String,
			alldata: String
		},
		data() {
			return {
				links: {
					form: {
						lineName: '',
					},
					rules: {
						lineName: [{
							required: true,
							message: '请输入链接',
							trigger: 'blur'
						}],
					}
				},
				showUpload: false,
				data: {
					token: Cookies.getJSON('TOKEN').uploadToken
				},
				modalunbind: false,
				defaultList: [],
				imgName: '',
				visible: false,
				domain: this.qiniu.domain,
				action: this.qiniu.uploadServer,
				photoList: [],
				imageList: [],
				uploadImg: {
					visible: true
				},
				btn: {
					visible: true
				},
				Url: '',
				demoshow: true,
				heightdata: [],
				modular: '',
				lsList: [],
				full: false,
			}
		},
		methods: {
			clickLink(data) {
				this.judgePosition(data)
				this.modalunbind = true;
				this.$refs.linkform.model.lineName = '';

				if(this.linksData.length != 0) {
					if(this.alldata == '5' || this.alldata == '6') {
						for(let i in this.linksData) {
							if(this.linksData[i].position == 'one') {
								this.linksData[i].modular = '模块一'
							} else if(this.linksData[i].position == 'two') {
								this.linksData[i].modular = '模块二'
							} else if(this.linksData[i].position == 'three') {
								this.linksData[i].modular = '模块三'
							}

							if(this.modular == this.linksData[i].modular) {
								this.$refs.linkform.model.lineName = this.linksData[i].url;
							}
						}
					} else {
						this.$refs.linkform.model.lineName = this.linksData[0].url;
					}
				}
			},
			judgePosition(data) {
				if(this.alldata == '4') {
					var sp = data.target.parentNode.parentNode.parentNode.parentNode.children[0].innerText;
					var bt = data.target.parentNode.parentNode.parentNode.children[0].innerText;
					if(sp == '视频' || bt == '视频') {
						this.modular = 'Middle';
					}
				}

				if(this.alldata == '5' || this.alldata == '6') {
					var modular1 = data.target.parentNode.parentNode.parentNode.parentNode.parentNode.children[0].children[0].childNodes[0].data;
					var modular2 = data.target.parentNode.parentNode.parentNode.parentNode.children[0].children[0].childNodes[0].data;

					if(typeof(modular1) == 'undefined') {
						this.modular = modular2;
					} else {
						this.modular = modular1;
					}
				}
			},
			Submission() {
				this.$refs.linkform.validate((valid) => {
					if(valid) {
						if(this.linksData.length != 0) {
							if(this.alldata == '4') {
								this.linksData.splice(0, 1)
								this.linksData.push({
									'url': this.$refs.linkform.model.lineName,
									'modular': this.modular
								})
							}

							if(this.alldata == '5') {
								for(let i in this.linksData) {
									if(this.modular == this.linksData[i].modular) {
										this.linksData.splice(i, 1, {
											'url': this.$refs.linkform.model.lineName,
											'modular': this.modular
										});
										break;
									} else if(this.linksData.length == 1) {
										this.linksData.push({
											'url': this.$refs.linkform.model.lineName,
											'modular': this.modular
										})
									}
								}
							}

							if(this.alldata == '6') {
								for(let i in this.linksData) {
									if(this.modular == this.linksData[i].modular) {
										this.linksData.splice(i, 1)
										this.linksData.push({
											'url': this.$refs.linkform.model.lineName,
											'modular': this.modular
										})
										break;
									} else if(this.linksData.length == 1 || this.linksData.length == 2) {
										this.linksData.push({
											'url': this.$refs.linkform.model.lineName,
											'modular': this.modular
										})
									}
								}

								for(let j in this.linksData) {
									this.lsList.push(this.linksData[j].modular)
								}

								var nary = this.lsList.sort();
								for(var i = 0; i < nary.length - 1; i++) {
									if(nary[i] == nary[i + 1]) {
										this.linksData.splice(i, 1)
									}
								}
							}
						} else {
							this.linksData.push({
								'url': this.$refs.linkform.model.lineName,
								'modular': this.modular
							})
						}

						this.modalunbind = false;
					} else {
						//this.$Message.error('请补充完整信息!');
					}
				})
			},
			setuploadImg() {
				if(this.multiple == false && this.imageList[0]) {
					this.uploadImg.visible = false;
					this.btn.visible = false;
					for(let i in this.imageList) {
						if(this.imageList[i].id == 'default') {
							this.demoshow = false;
						}
					}
				}
				if(this.multiple == false && !this.imageList[0]) {
					this.uploadImg.visible = true;
					this.btn.visible = true;
				}

				if(this.multiple == true && this.imageList.length!=0) {
					this.uploadImg.visible = false;
					this.btn.visible = true;
					$('.videoUpload').css({
						position:'absolute',
						bottom:'-30px',
						left:'0px',

					})
				}
			},
			Reset() {
				this.$refs.linkform.resetFields();
			},
			unbindOk() {
				this.$refs.linkform.resetFields();
			},
			getImageList(data) {
				this.imageList = data;
				if(data.length == 0) {
					this.imageList = [];
				}
				this.demoshow = true;
				this.setuploadImg();
			},
			handleView(name) {
				this.visible = true;
				this.imgName = name;
			},
			handleRemove(file) {
				if(this.delUrl == 'notice') {
					this.Url = '/notice/video';
				} else if(this.delUrl == 'activity'){
					this.Url = '/activity/video';
				} else {
					this.Url = this.delUrl;
				}

				this.imageList.splice(this.imageList.indexOf(file), 1);
				if(file.id) {
					API.del(this.Url, {
						id: file.id
					}).then(resp => {
						if(resp.code == 200) {
							this.photoList.splice(this.photoList.indexOf(file.name), 1);
							// this.$emit('setPhotoList', this.photoList, file);
              this.$emit('setVideoList', this.photoList, file, this.imageList);
							this.$emit('judgeBtn', file);
							this.$Notice.success({
								title: '提示',
								desc: '删除成功'
							});
						}
					});
				} else {
					API.deleteFileFromQiNiu({
						fileName: file.name
					}).then(resp => {
						if(resp.code == 200) {
							this.photoList.splice(this.photoList.indexOf(file.name), 1);
							// this.$emit('setPhotoList', this.photoList, file);
              this.$emit('setVideoList', this.photoList, file, this.imageList);
							this.$emit('judgeBtn', file);
							this.$Notice.success({
								title: '提示',
								desc: '删除成功'
							});
						}
					});
				}
				this.setuploadImg();
			},
			handleSuccess(res, file) {
				file.url = this.domain + res.key;
				file.name = res.key;
				file.fname = res.fname;
				for(let i in this.imageList) {
					if(this.imageList[i].name === file.name) {
						this.$Notice.success({
							title: '提示',
							desc: '视频已经存在!'
						});
						return;
					}
				}
				file.imageUrl = this.domain + res.key + '?vframe/jpg/offset/5';
				console.log(111);
				console.log(file);
				this.imageList.push({
					name: file.name,
          fname: file.fname,
					url: file.url,
					status: file.status,
					imageUrl: file.imageUrl
				});
				this.photoList.push(file.name);
				this.$emit('setVideoList', this.photoList, file, this.imageList);
				this.photoList = [];
				this.setuploadImg();
			},
			handleFormatError(file) {
				this.$Notice.warning({
					title: '不支持此类视频！',
					desc: '请选择mp4格式的视频！'
				});
			},
			handleMaxSize(file) {
				this.$Notice.warning({
					title: '视频大小超出！',
					desc: '请选择小于20M的视频！'
				});
			},
			handleBeforeUpload(file) {

			}
		},
		mounted() {
			this.setuploadImg();
		}
	}
</script>
<style type="text/css" scoped>
	.demo-upload-list {
		display: inline-block;
		width: 80px;
		height: 80px;
		text-align: center;
		line-height: 80px;
		border: 1px solid transparent;
		border-radius: 4px;
		overflow: hidden;
		background: #fff;
		position: relative;
		box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
		margin-right: 4px;
	}

	.demo-upload-list img {
		width: 100%;
		height: 100%;
	}

	.demo-upload-list-cover {
		display: none;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, .6);
	}

	.demo-upload-list:hover .demo-upload-list-cover {
		display: block;
	}

	.demo-upload-list-cover i {
		color: #fff;
		font-size: 20px;
		cursor: pointer;
		margin: 0 2px;
	}

	.check_pig {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999;
	}

	.videolink {
		float: left;
	}

	.videoUpload {
		float: left;
	}
</style>
